<template>
  <div class="mobile-layout">
    <!-- 顶部三个入口模块 -->
    <div class="top-entrances">
      <div class="entrance-card" :class="{ active: activeModule === 'teaching' }" @click="selectModule('teaching')">
        <div class="entrance-icon">📚</div>
        <div class="entrance-title">教学助手</div>
      </div>
      <div class="entrance-card" :class="{ active: activeModule === 'home' }" @click="selectModule('home')">
        <div class="entrance-icon">🏠</div>
        <div class="entrance-title">家园助手</div>
      </div>
      <div class="entrance-card" :class="{ active: activeModule === 'activity' }" @click="selectModule('activity')">
        <div class="entrance-icon">🎈</div>
        <div class="entrance-title">活动助手</div>
      </div>
    </div>

    <!-- 对话窗口 -->
    <div class="chat-container">
      <!-- 教学助手专用：教学教案和周计划入口 -->
      <div v-if="activeModule === 'teaching' && currentPage === 'chat'" class="teaching-actions">
        <el-button class="action-button" @click="openTeachingPlanForm" type="primary">
          📝 教学教案
        </el-button>
        <el-button class="action-button" @click="openWeekPlan" type="primary">
          📅 周计划
        </el-button>
      </div>

      <!-- 活动助手专用：活动安排和教学安排入口 -->
      <div v-if="activeModule === 'activity' && currentPage === 'chat'" class="teaching-actions">
        <el-button class="action-button" @click="openActivityArrange" type="primary">
          🎉 活动安排
        </el-button>
        <el-button class="action-button" @click="openActivityTeaching" type="primary">
          📘 教学安排
        </el-button>
      </div>

      <transition-group name="msg" tag="div" class="message-list" ref="messageListRef" v-show="currentPage === 'chat'">
        <div v-for="(message, index) in messages" :key="'msg-' + index" :class="[
        'message',
        message.isUser ? 'user-message' : 'bot-message'
      ]">
          <div class="message-avatar">
            <span v-if="message.isUser">👤</span>
            <span v-else>🤖</span>
          </div>
          <div class="message-content">
            <div class="message-text" v-html="message.content"></div>
            <div class="loading-dots" v-if="message.isTyping">
              <span class="dot"></span>
              <span class="dot"></span>
              <span class="dot"></span>
            </div>
          </div>
        </div>
        <div v-if="messages.length === 0" class="empty-state">
          <div class="empty-icon">💬</div>
          <div class="empty-text">选择上方助手开始对话</div>
        </div>
      </transition-group>
    </div>

    <!-- 底部输入框 -->
    <div class="input-container" v-show="currentPage === 'chat'">
      <el-popover v-if="activeModule === 'home'" placement="top-start" trigger="click" :width="280"
        v-model:visible="homeHotVisible" popper-class="hot-questions-popper">
        <template #reference>
          <el-button class="hot-questions-trigger" type="default">热门问题</el-button>
        </template>
        <div class="hot-question-item" @click="fakeQuickSend('告诉我幼儿园的园区地址，乘车路线', FAKE_HOME_Q1)">📍 告诉我幼儿园的园区地址，乘车路线
        </div>
        <div class="hot-question-item" @click="fakeQuickSend('介绍一下幼儿园的师资力量和园区基础概况', FAKE_HOME_Q2)">👩‍🏫
          介绍一下幼儿园的师资力量和园区基础概况
        </div>
        <div class="hot-question-item" @click="fakeQuickSend('幼儿园的作息时间、接送流程、请假制度等基础信息', FAKE_HOME_Q3)">⏰
          幼儿园的作息时间、接送流程、请假制度等基础信息
        </div>
      </el-popover>
      <el-input v-model="inputMessage" type="textarea" :autosize="{ minRows: 3, maxRows: 8 }"
        placeholder="请输入消息...（Enter 发送，Shift+Enter 换行）" @keyup.enter.exact="sendMessage" class="chat-input" clearable />
      <el-button @click="sendMessage" :disabled="isSending || !inputMessage.trim()" type="primary" class="send-button">
        <span v-if="!isSending">发送</span>
        <span v-else>发送中...</span>
      </el-button>
    </div>

    <!-- 教学教案表单页面 -->
    <div v-if="currentPage === 'teaching-plan'" class="form-page-wrapper">
      <TeachingPlanForm @close="closeTeachingPlanForm" @generate="handleGeneratePlan" />
    </div>

    <!-- 活动安排表单页面 -->
    <div v-if="currentPage === 'activity-plan'" class="form-page-wrapper">
      <ActivityArrangeForm @close="closeActivityArrangeForm" @generate="handleGenerateActivity" />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch, nextTick } from 'vue'
import axios from 'axios'
import { v4 as uuidv4 } from 'uuid'
import TeachingPlanForm from './TeachingPlanForm.vue'
import ActivityArrangeForm from './ActivityArrangeForm.vue'
import dayjs from 'dayjs'
const messageListRef = ref()
const isSending = ref(false)
const uuid = ref()
const inputMessage = ref('')
const messages = ref([])
const activeModule = ref('teaching') // 默认选择教学助手
const currentPage = ref('chat') // 当前页面：chat、teaching-plan、week-plan
const homeHotVisible = ref(false) // 家园助手热门问题气泡显隐
const todayDate = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
// 活动安排假数据占位（请替换为你的实际文本）
const FAKE_ACTIVITY_RESPONSE = `
你好张老师！很高兴为您服务～😊 现在的时间是${todayDate.value}
今日你的活动安排如下:
活动一：户外自然探索 ——《寻找春天的小秘密》
中二班 9:00-9:30
2. 活动目标
认知目标：观察春天植物的变化，如发芽的小草、开花的迎春花，能说出 2 - 3 种春季特征。
技能目标：学习用放大镜观察细节，用绘画本简单记录发现，锻炼观察与动手能力。
情感目标：感受户外自然的美好，培养爱护花草树木的意识。
3. 活动流程（30 分钟）
导入（5 分钟）：教师用 “春天来了，小树 / 小花有什么新变化” 提问，引发幼儿兴趣。
探索（15 分钟）：带领幼儿到园区草坪、花坛，分组用放大镜观察，教师引导幼儿描述看到的颜色、形状。
分享与总结（10 分钟）：幼儿展示自己的 “发现记录”，教师汇总幼儿观察结果，强调爱护植物的重要性。
4. 材料准备
放大镜（每人 1 个）、空白绘画本（每人 1 本）、彩色蜡笔、小篮子（用于收集落叶等安全自然物）。`

// 家园助手热门问题 - 假对话占位（请替换为你的实际文本）
const FAKE_HOME_Q1 = `您好！我是学前小智，很高兴为您服务～😊
关于幼儿园的园区地址和乘车路线，我为您整理如下：
【总园】  
地址：XX市XX区新安街道新乐社区X号（邮编：Y100020）  
小提示：您可以通过手机地图APP搜索对应地址，查看最新的公交/地铁路线。如果需要更详细的乘车指引，可以随时联系我们的客服电话：0755-XXXXXXX（具体号码请通过幼儿园官网查询）～  
总园乘车路线：
1. 56，12，67，86，75，到新安路口北
2. 5，104，快到新安路口南
3. 1，52，859，642，到新安路口西
4. 5，2，13，74，652，到新安路口东
5. 103，104，420，803，到新安市场
6. 地铁1号线或5号线到新安站，A或B出口向北
需要我帮您预约观园体验吗？这样您可以实地看看园区环境哦！✨`

const FAKE_HOME_Q2 = `亲爱的家长您好！我是学前小智，很高兴为您介绍我们的幼儿园哦～✨
在小朋友们的乐园里，我们有超温馨的园区和超棒的老师团队呢！🌟
【园区小天地】
• 总园（XX市XX区）：有3栋教学楼、1个超大的户外游乐场（滑梯、沙池、攀爬架等），12个班级，能容纳42个小宝贝一起玩！
• 每个教室都配备了多媒体、空调和空气净化，户外绿意环绕，让小朋友们呼吸到新鲜空气！
【超有爱的老师团队】
我们有78位专业的小老师，全部持有幼儿教师资格证！其中还有3位省级优秀教师、8位市级骨干老师，12位老师在比赛中拿过奖呢～
为了保障小朋友们的安全，我们每学期都会做“门窗安全大排查”，老师也定期学习安全应急小妙招，让每个小宝贝都能安心玩耍！
这样，小朋友们在幼儿园里既安全又开心，家长也能放心呢！有其他问题随时找我哦～❤️`
const FAKE_HOME_Q3 = `你好呀！我是学前小智，是XX幼儿园的小助手，专门帮家长解决育儿小问题哦~（*^▽^*）  
**幼儿园作息时间（具体）**  
⏰ 早上：7:30-8:30（入园）→ 9:00-11:30（上午活动）→ 11:30-12:00（午休）  
🌙 下午：14:00-15:30（户外游戏）→ 15:30-16:30（自由活动）→ 16:30-17:00（离园）  
**接送流程（安全小贴士）**  
1️⃣ **入园时**：家长在园门口亮出孩子的姓名卡（小卡片），老师会轻轻拍你肩膀说“你好呀！”  
2️⃣ **离园时**：先和老师说“我带孩子回家啦”，再和孩子一起检查书包（别忘带小玩具哦！）  
⚠️ **安全提醒**：最近我们做了“门窗安全大排查”，请家长教孩子：推门时要扶住门把手，别着急！（就像案例里睿睿和萌萌的故事~）  
**请假制度**  
✅ 需提前1天通过“幼儿园APP”或电话通知老师（比如：妈妈说“今天我要带宝宝去奶奶家，请假一天，谢谢老师”）  
❌ 临时请假（比如生病）：请立刻联系班主任，我们会给出专业的建议  
需要我帮你预约观园吗？或者想听听今天的绘本故事？（*^▽^*）`

onMounted(() => {
  initUUID()
  // 监听消息变化，自动滚动到底部
  watch(messages, () => {
    nextTick(() => {
      scrollToBottom()
    })
  }, { deep: true })
})

// 选择模块
const selectModule = (module) => {
  activeModule.value = module
  // 切换模块时回到聊天页面
  currentPage.value = 'chat'
  // 清空聊天记录与输入，并生成新的用户ID
  messages.value = []
  inputMessage.value = ''
  isSending.value = false
  initUUID()
  // 可以在这里根据模块不同加载不同的对话历史或提示
  console.log('选择模块:', module)
}

// 打开教学教案表单
const openTeachingPlanForm = () => {
  currentPage.value = 'teaching-plan'
}

// 关闭教学教案表单
const closeTeachingPlanForm = () => {
  currentPage.value = 'chat'
}

// 打开周计划（暂时提示）
const openWeekPlan = () => {
  // 周计划功能待开发
  alert('周计划功能开发中...')
}

// 处理教学教案生成
const handleGeneratePlan = (prompt) => {
  // 关闭表单页面
  closeTeachingPlanForm()
  // 将生成的提示词发送到聊天，但不显示用户消息
  sendRequest(prompt, false)
}

// 活动助手 - 打开活动安排表单
const openActivityArrange = () => {
  currentPage.value = 'activity-plan'
}

const openActivityTeaching = () => {
  // 直接发送提示词，可后续替换为表单页
  quickSend('请为本周活动生成对应的教学安排（含日程、重点难点、区域材料与评价建议）')
}

// 关闭活动安排表单
const closeActivityArrangeForm = () => {
  currentPage.value = 'chat'
}

// 处理活动安排生成
const handleGenerateActivity = ({ days, label }) => {
  closeActivityArrangeForm()
  // 模拟一次“查询”对话：插入用户消息与机器人“假数据”回复
  const userMsg = {
    isUser: true,
    content: `查询：活动安排（${label}）`,
    isTyping: false,
  }
  messages.value.push(userMsg)

  const botMsg = {
    isUser: false,
    content: '',
    isTyping: true,
  }
  messages.value.push(botMsg)
  const lastMsg = messages.value[messages.value.length - 1]

  nextTick(() => {
    scrollToBottom()
  })

  // 模拟异步返回（1 秒延时）
  setTimeout(() => {
    lastMsg.content = formatMessage(FAKE_ACTIVITY_RESPONSE)
    lastMsg.isTyping = false
    scrollToBottom()
  }, 1000)
}

// 滚动到底部
const scrollToBottom = () => {
  if (messageListRef.value) {
    messageListRef.value.scrollTop = messageListRef.value.scrollHeight
  }
}

// 新增：教学助手安全教育案例固定回复（请替换为实际内容）
const FAKE_SAFETY_CASE = `你好张老师!现在的时间是${todayDate.value} 
接下来由我为你讲述本园安全案例:
本园幼儿安全案例：2024年11月小班幼儿推拉教室门事件 场景：我校小班教室出入口，晨间入园时段
发现教师：配班李老师
经过：
晨间入园时，李老师在门口接待幼儿，突然听到教室方向传来“哇哇”哭声。循声发现小班幼儿萌萌的手指被教室推拉门夹红了，而旁边的睿睿正着急地站在一旁。原来睿睿入园后兴奋地快速推拉教室门，没注意到萌萌的手还在门缝附近，导致萌萌手指被夹。
处理过程：
1. 应急处理：李老师立刻查看萌萌的手指（表皮轻微红肿），带她到保健室用冷敷处理，同时安抚两人情绪，告诉睿睿不是故意的，但要知道这样做很危险。
2. 个体教育：李老师分别和睿睿、萌萌沟通。对睿睿，用玩具门演示“慢慢推、轻轻拉”的动作，让他感受快速推拉的冲击力；对萌萌，通过绘本《小手的安全》讲解身体部位保护知识。
3. 集体安全教育：利用班级“安全小课堂”时间，李老师用动画《门窗宝宝的叮嘱》展示推拉门窗的正确使用方式，组织幼儿玩“轻轻推开门”的角色扮演游戏，强化“慢推轻拉，不跑不挤”的安全意识。
4. 后续措施：
◦ 李老师在教室推拉门处安装防夹手缓冲条，张贴“慢慢推拉”的卡通提示画；
◦ 与睿睿、萌萌家长沟通，建议在家中关注孩子使用抽屉、推拉门的行为，做好安全防护；
◦ 园所开展“门窗安全大排查”，检修全园推拉门窗的防撞、防夹装置，同时对教师进行“幼儿设施安全应急处置”培训。`;

// 发送消息
const sendMessage = () => {
  if (!inputMessage.value.trim() || isSending.value) {
    return;
  }

  const messageText = inputMessage.value.trim();
  inputMessage.value = '';

  // 教学助手模块特殊处理：安全教育案例查询
  if (activeModule.value === 'teaching' && messageText === '查询2024年11月本园安全教育案例') {
    // 模拟用户消息
    const userMsg = {
      isUser: true,
      content: messageText,
      isTyping: false,
    };
    messages.value.push(userMsg);

    // 模拟机器人回复（1秒延时）
    const botMsg = {
      isUser: false,
      content: '',
      isTyping: true,
    };
    messages.value.push(botMsg);
    const lastMsg = messages.value[messages.value.length - 1];

    nextTick(() => scrollToBottom());

    setTimeout(() => {
      lastMsg.content = formatMessage(FAKE_SAFETY_CASE);
      lastMsg.isTyping = false;
      scrollToBottom();
    }, 1000);

    return; // 终止后续请求流程
  }

  // 其他消息正常发送请求
  sendRequest(messageText);
}

// 一键发送热门问题
const quickSend = (text) => {
  if (!text || isSending.value) return
  // 直接走统一请求逻辑，并显示用户消息
  sendRequest(text, true)
}

// 前端假对话（不请求后端，1 秒延时） - 用于家园助手热门问题
const fakeQuickSend = (userText, responseText) => {
  // 关闭热门问题气泡
  homeHotVisible.value = false
  if (!userText) return
  const userMsg = {
    isUser: true,
    content: userText,
    isTyping: false,
  }
  messages.value.push(userMsg)

  const botMsg = {
    isUser: false,
    content: '',
    isTyping: true,
  }
  messages.value.push(botMsg)
  const lastMsg = messages.value[messages.value.length - 1]

  nextTick(() => {
    scrollToBottom()
  })

  // 1 秒后展示假数据
  setTimeout(() => {
    lastMsg.content = formatMessage(responseText || '')
    lastMsg.isTyping = false
    scrollToBottom()
  }, 1000)
}

// 发送请求到后端
const sendRequest = (message, showUserMessage = true) => {
  isSending.value = true

  // 如果需要显示用户消息，则添加
  if (showUserMessage) {
    const userMsg = {
      isUser: true,
      content: message,
      isTyping: false,
    }
    messages.value.push(userMsg)
  }

  // 添加机器人消息占位符
  const botMsg = {
    isUser: false,
    content: '',
    isTyping: true,
  }
  messages.value.push(botMsg)
  const lastMsg = messages.value[messages.value.length - 1]

  scrollToBottom()

  // 根据选中的模块决定API路径
  const apiPath = activeModule.value === 'home' ? '/api/xiaozhi/chat1' : '/api/xiaozhi/chat'

  // 发送请求到后端
  axios
    .post(
      apiPath,
      {
        userId: uuid.value,
        message
      },
      {
        headers: {
          'Content-Type': 'application/json',
        },
      }
    )
    .then((response) => {
      // 处理响应 - 支持文本和JSON格式
      let responseText = ''

      if (typeof response.data === 'string') {
        // 纯文本响应
        responseText = response.data
      } else if (typeof response.data === 'object' && response.data !== null) {
        // JSON响应，尝试提取常见字段
        responseText = response.data.message || response.data.data || response.data.content || response.data.text || JSON.stringify(response.data)
      } else {
        responseText = '抱歉，没有收到回复'
      }

      lastMsg.content = formatMessage(responseText)
      lastMsg.isTyping = false
      isSending.value = false
      scrollToBottom()
    })
    .catch((error) => {
      console.error('请求错误:', error)
      // 尝试从错误响应中提取信息
      if (error.response && error.response.data) {
        let errorText = ''
        if (typeof error.response.data === 'string') {
          errorText = error.response.data
        } else if (error.response.data.message) {
          errorText = error.response.data.message
        } else {
          errorText = '请求失败，请重试'
        }
        lastMsg.content = formatMessage(errorText)
      } else {
        lastMsg.content = '请求失败，请重试。请检查后端服务是否正常运行。'
      }
      lastMsg.isTyping = false
      isSending.value = false
      scrollToBottom()
    })
}

// 格式化消息（转换换行符等）
const formatMessage = (text) => {
  if (!text) return ''
  return text
    .replace(/\n/g, '<br>')
    .replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;')
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/&lt;br&gt;/g, '<br>') // 恢复br标签
}

// 初始化 UUID - 每次刷新都生成新的userId
const initUUID = () => {
  // 每次都生成新的userId，不使用localStorage
  const newUUID = uuidToNumber(uuidv4())
  uuid.value = newUUID
}

const uuidToNumber = (uuid) => {
  let number = 0
  for (let i = 0; i < uuid.length && i < 6; i++) {
    const hexValue = uuid[i]
    number = number * 16 + (parseInt(hexValue, 16) || 0)
  }
  return number % 1000000
}
</script>

<style scoped>
.mobile-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;
}

/* 背景渐变轻微流动动画 */
.mobile-layout {
  background-size: 200% 200%;
  animation: gradientShift 14s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* 顶部入口模块 */
.top-entrances {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 8px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.entrance-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  margin: 0 5px;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 2px solid transparent;
}

.entrance-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 顶部入口卡片进场动画（细微上浮） */
.top-entrances .entrance-card {
  opacity: 0;
  transform: translateY(8px);
  animation: fadeSlideUp 500ms ease forwards;
}

.top-entrances .entrance-card:nth-child(1) {
  animation-delay: 80ms;
}

.top-entrances .entrance-card:nth-child(2) {
  animation-delay: 160ms;
}

.top-entrances .entrance-card:nth-child(3) {
  animation-delay: 240ms;
}

@keyframes fadeSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.entrance-card.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
  color: #fff;
}

.entrance-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.entrance-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.entrance-card.active .entrance-title {
  color: #fff;
}

/* 对话容器 */
.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 4px;
}

/* 表单页面包装器 */
.form-page-wrapper {
  position: absolute;
  top: 60px;
  /* 顶部入口模块的高度 */
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.98);
  z-index: 100;
}

/* 教学助手操作按钮 */
.teaching-actions {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  margin-bottom: 5px;
}

.action-button {
  flex: 1;
  border-radius: 20px;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
}

.message-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 聊天消息进入/离开/移动动画（配合 <transition-group name="msg">） */
.msg-enter-from,
.msg-leave-to {
  opacity: 0;
  transform: translateY(6px) scale(0.98);
}

.msg-enter-active,
.msg-leave-active {
  transition: all 220ms ease;
}

.msg-move {
  transition: transform 220ms ease;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 15px;
  opacity: 0.5;
}

.empty-text {
  font-size: 16px;
  color: #999;
}

/* 消息样式 */
.message {
  display: flex;
  gap: 10px;
  max-width: 85%;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.user-message {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.bot-message {
  align-self: flex-start;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.8);
}

.user-message .message-avatar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.bot-message .message-avatar {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.message-content {
  padding: 12px 16px;
  border-radius: 18px;
  word-wrap: break-word;
  line-height: 1.5;
}

.user-message .message-content {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.bot-message .message-content {
  background: #f0f0f0;
  color: #333;
  border-bottom-left-radius: 4px;
}

.message-text {
  font-size: 15px;
}

/* 加载动画 */
.loading-dots {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  align-items: center;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #999;
  animation: bounce 1.4s infinite ease-in-out both;
}

.bot-message .dot {
  background: #666;
}

.user-message .dot {
  background: rgba(255, 255, 255, 0.7);
}

.dot:nth-child(1) {
  animation-delay: -0.32s;
}

.dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes bounce {

  0%,
  80%,
  100% {
    transform: scale(0);
    opacity: 0.5;
  }

  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 输入容器 */
.input-container {
  display: flex;
  gap: 10px;
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  align-items: center;
}

.chat-input {
  flex: 1;
}

.chat-input :deep(.el-textarea__inner) {
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chat-input :deep(.el-input__wrapper) {
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.send-button {
  border-radius: 20px;
  padding: 10px 24px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.send-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 按钮交互细节 */
.send-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.send-button:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

/* 输入栏里的热门问题触发与气泡内容样式 */
.hot-questions-trigger {
  border-radius: 20px;
}

.hot-questions-popper {
  padding: 8px 8px;
  animation: popIn 160ms ease;
}

.hot-question-item {
  background: #fff;
  border: 1px solid rgba(102, 126, 234, 0.25);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.hot-question-item+.hot-question-item {
  margin-top: 8px;
}

.hot-question-item:hover {
  background: #f7f8ff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 滚动条样式 */
.message-list::-webkit-scrollbar {
  width: 6px;
}

.message-list::-webkit-scrollbar-track {
  background: transparent;
}

.message-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.message-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* 移动端优化 */
@media (max-width: 480px) {
  .top-entrances {
    padding: 12px 8px;
  }

  .entrance-card {
    padding: 10px 6px;
    margin: 0 3px;
  }

  .entrance-icon {
    font-size: 28px;
    margin-bottom: 6px;
  }

  .entrance-title {
    font-size: 12px;
  }

  .message {
    max-width: 90%;
  }

  .message-content {
    padding: 10px 14px;
    font-size: 14px;
  }

  .input-container {
    padding: 5px 12px;
  }

  .send-button {
    padding: 8px 20px;
    font-size: 14px;
  }
}

/* 横屏适配 */
@media (orientation: landscape) and (max-height: 600px) {
  .top-entrances {
    padding: 10px 8px;
  }

  .entrance-icon {
    font-size: 24px;
    margin-bottom: 4px;
  }

  .entrance-title {
    font-size: 11px;
  }

  .message-list {
    padding: 8px;
  }
}
</style>
